// @import './utils.scss';
@import './util/helpers.scss';
@import './util/variables.scss';
// @import './icon.scss';
// @import './icons.scss';
$menu-width: 270px;
$column: 5.55555%;

body {
  @include less-position(absolute, 0, 0, 0, 0);
  background-color: #315481;
  background-image: linear-gradient(to bottom, #315481, #918e82 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.container {
  @include less-position(absolute, 0, 0, 0, 0);

  @media screen and (min-width: 60em) {
    left: $column;
    right: $column;
  }

  @media screen and (min-width: 80em) {
    left: 2*$column;
    right: 2*$column;
  } // Hide anything offscreen
  overflow: hidden;
}
.menu {
  @include less-position(absolute, 0, 0, 0, 0, $menu-width);
  background-color: #315481;
  background-image: linear-gradient(to bottom, #315481, #918e82 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.content-container {
  @include less-position(absolute, 0, 0, 0, 0);
  transition: all 200ms ease-out;
  transform: translate3d(0, 0, 0);
  background: $color-tertiary;
  opacity: 1;

  .page {
    @include less-position(absolute, 0, 0, 0, 0);
  }

  @media screen and (min-width: 40em) {
    left: $menu-width;
  }

  .content-scrollable {
    @include less-position(absolute, 0, 0, 0, 0);
    transform: translate3d(0, 0, 0);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  } // Toggle menu on mobile
  .menu-open & {
    transform: translate3d($menu-width, 0, 0);
    opacity: .85;
    left: 0;

    @media screen and (min-width: 40em) {
      // Show menu on desktop, negate .menu-open
      transform: translate3d(0, 0, 0); //reset transform and use position properties instead
      opacity: 1;
      left: $menu-width;
    }
  }
}

// Transparent screen to prevent interactions on content when menu is open
.content-overlay {
  @include less-position(absolute, 0, 0, 0, 0);
  cursor: pointer;

  .menu-open & {
    transform: translate3d($menu-width, 0, 0);
    z-index: 1;
  } // Hide overlay on desktop
  @media screen and (min-width: 40em) {
    display: none;
  }
}

.list-move,
.list-leave-active,
.list-enter-active {
  transition: 500ms cubic-bezier(.87, -.41, .19, 1.44);
}

.list-enter,
.list-leave-active {
  transform: translate(100%, 0);
  opacity: 0;
}